<script setup>
  import { ref, toRefs, defineExpose } from 'vue';
  import { useDrawerStore } from '@/store/drawerDataStores.js';
  import { message } from '@/utils/message';


  const drawerStore = useDrawerStore();
  const props = defineProps({
    devVarTableSelectedItem: {
      type: Object,
      default() {
        return {}
      }
    },
    publicForm: {
      type: Object,
      default() {
        return {}
      }
    }
  });
  const { devVarTableSelectedItem, publicForm } = toRefs(props);
  const emit = defineEmits(['childFormObj']);

  const ruleFormRef = ref(),
        ruleForm = ref({
          url: undefined, // URL
          readingMethod: undefined, // 获取数据方法
          timeoutSetting: undefined, // 超时设置
        });

  // 配置按钮
  const configClick = () => {
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        emit('childFormObj', ruleForm.value);
      } else {
        return false;
      }
    })
  };
  // 父组件调用清空函数
  const clearVar = () => {
<<<<<<< HEAD
    ruleFormRef.value.resetFields();
=======
    ruleForm.value = {
      url: undefined, // URL
      readingMethod: undefined, // 获取数据方法
      timeoutSetting: undefined, // 超时设置
    }
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
  };
  // 父组件调用保存函数
  const saveStore = () => {
    drawerStore.mqttForm = ruleForm.value;
  };
  // 父组件调用赋值函数
  const copyStore = () => {
    if (devVarTableSelectedItem.value.state === 1) {
      ruleForm.value = {
        url: devVarTableSelectedItem.value.url, // URL
        readingMethod: devVarTableSelectedItem.value.readingMethod, // 安全策略
        timeoutSetting: devVarTableSelectedItem.value.timeoutSetting, // 超时设置
      }
    } else {
      ruleForm.value = drawerStore.mqttForm;
    }
  };
  defineExpose({
    clearVar,
    saveStore,
    copyStore
  });
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :inline="true"
      label-position="right"
    >
      <el-form-item
        label="URL"
        prop="url"
        class="form-item"
        :rules="{ required: true, message: '请输入url', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.url" placeholder="请输入url"></el-input>
      </el-form-item>
      <el-form-item
        label="数据读取方法"
        prop="readingMethod"
        class="form-item"
        :rules="{ required: true, message: '请输入url', trigger: 'change' }"
      >
        <el-select v-model="ruleForm.readingMethod">
          <el-option label="GET" value="1"></el-option>
          <el-option label="POST" value="2"></el-option>
          <el-option label="PUT" value="3"></el-option>
          <el-option label="DELETE" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="超时设置"
        prop="timeoutSetting"
        class="form-item"
        :rules="{ required: true, message: '请输入超时设置', trigger: 'change' }"
      >
        <el-select v-model="ruleForm.timeoutSetting">
          <el-option label="30S" value="1"></el-option>
          <el-option label="45S" value="2"></el-option>
          <el-option label="60S" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SSL/TLS" class="form-item">
        <div class="https-btn">
          <el-button type="primary" plain>验证</el-button>
          <el-button type="success" plain>通过</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .form-btn {
    margin-top: 30px;
  }

  .form-item {
    width: calc(100% - 35px);
  }

  .https-btn {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
  }

  .config-btn {
    text-align: right;
    padding-top: 20px
  }
</style>
